<template>
  <div class="custom__box">
    <div class="custom__table" ref="table">
      <a-table 
        :pagination="false" 
        :dataSource="dataSource" 
        :columns="columns"
        bordered
        size="middle"
        :scroll="scroll"
      >
      <template #bodyCell="{ column, record }">
        <slot name="bodyCell" v-bind="{ column, record }"></slot>
      </template>
    </a-table>
    </div>
    <div class="custom__pagination">
      <a-pagination 
      :current="paginationData.currentPage"
      :total="paginationData.total" 
      :size="paginationData.pageSize" 
      :pageSizeOptions="paginationData.pageSizes"
      show-less-items
      showSizeChanger
      show-quick-jumper
      @change="pagesChange"
      @showSizeChange="showSizeChange"
      />
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, nextTick } from 'vue'
defineProps(['paginationData', 'dataSource', 'columns'])

var scroll = reactive({
  y: 500,
  x: 'max-content'
})
const table = ref()
nextTick(() => {
  const { top } = table.value.getBoundingClientRect()
  scroll.y = window.innerHeight - top - 120
})

const emit = defineEmits(['change', 'showSizeChange'])

const pagesChange = (page) => {
  emit('change', page)
}
const showSizeChange = (current, size) => {
  emit('showSizeChange', current, size)
}
</script>

<style lang='less' scoped>
  .custom__box {
    margin-top: 40px;
  }
  .custom__pagination {
    display: flex;
    justify-content: flex-end;
    padding: 24px 0;
  }
</style>